// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { h, fragment, JSXComponent, JSXProps } from '@knno/dom/jsx';
import { Button } from '@knno/ui/jsx/button';
import { bar } from './index.css';
import Person from '@material-design-icons/svg/filled/person.svg';
import { Test, TestComponent, TestNode } from './test';
import SVGMail from '@mdi/svg/svg/mail.svg';

class MydivElement extends HTMLElement {
	connectedCallback() {
		this.dispatchEvent(new Event('connect'));
	}
	disconnectedCallback() {
		this.dispatchEvent(new Event('disconnect'));
	}
}
customElements.define('my-div', MydivElement);

class MyDiv extends JSXComponent<MyDiv> {
	constructor(attr: JSXProps<any>) {
		super(<my-div>hshssh</my-div>, attr);
	}
}

export function ShowButtons() {
	let testNode: TestNode;
	return (
		<>
			<h2>按钮</h2>
			<div class={bar}>
				<Button type="info" text="普通" />
				<Button type="primary" icon={Person} text="主要" />
				<Button type="success" text="成功" />
				<Button type="warning" text="警告" />
				<Button type="danger" text="危险" />
			</div>
			<div class={bar}>
				<Button type="info" text="普通" disabled />
				<Button type="primary" icon={Person} text="主要" disabled />
				<Button type="success" text="成功" disabled />
				<Button type="warning" text="警告" disabled />
				<Button type="danger" text="危险" disabled />
			</div>
			<div class={bar}>
				<Button text="普通" />
				<Button type="primary-outline" icon={Person} text="主要" />
				<Button type="success-outline" text="成功" />
				<Button type="warning-outline" text="警告" />
				<Button type="danger-outline" text="危险" />
			</div>
			<div class={bar}>
				<Button text="普通" disabled />
				<Button type="primary-outline" icon={Person} text="主要" disabled />
				<Button type="success-outline" text="成功" disabled />
				<Button type="warning-outline" text="警告" disabled />
				<Button type="danger-outline" text="危险" disabled />
			</div>
			<div class={bar}>
				<Button type="info-text" text="普通" />
				<Button type="primary-text" icon={Person} text="主要" />
				<Button type="success-text" text="成功" />
				<Button type="warning-text" text="警告" />
				<Button type="danger-text" text="危险" />
			</div>
			<div class={bar}>
				<Button type="info-text" text="普通" disabled />
				<Button type="primary-text" icon={Person} text="主要" disabled />
				<Button type="success-text" text="成功" disabled />
				<Button type="warning-text" text="警告" disabled />
				<Button type="danger-text" text="危险" disabled />
			</div>
			<div class={bar}>
				<Button text="下拉菜单" menu />
			</div>
			<div class={bar}>
				<Button icon={Person} text="下拉菜单" menu />
			</div>
			<div class={bar}>
				<Button icon={Person} menu />
				Icon Only：
				<Button icon={SVGMail}></Button>
			</div>
			<div class={bar}>
				<Button icon={SVGMail} iconPos="top" menu>
					发邮件
				</Button>
				Icon Only：
				<Button icon={SVGMail} iconPos="top" menu></Button>
			</div>
			<MyDiv
				onconnect={(e) => {
					console.log('on connect');
				}}
				ondisconnect={(e) => {
					console.log('on disconnect');
				}}
				onclick={(e) => {
					console.log('on click');
				}}
			></MyDiv>
		</>
	);
}
